
@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1477992025551'); /* IE9*/
    src: url('iconfont.eot?t=1477992025551#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff?t=1477992025551') format('woff'), /* chrome, firefox */
    url('iconfont.ttf?t=1477992025551') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('iconfont.svg?t=1477992025551#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.icon-fenxiang1:before { content: "\e600"; }
.icon-mulu:before { content: "\e601"; }
.icon-shuqian:before { content: "\e60c"; }
.icon-zitifangda:before { content: "\e602"; }
.icon-zitisuoxiao:before { content: "\e603"; }
.icon-baitianmoshi:before { content: "\e604"; }
.icon-zitidaxiao:before { content: "\e606"; }
.icon-xiangqing:before { content: "\e607"; }
.icon-yejian:before { content: "\e605"; }
.icon-yuan:before { content: "\e60b"; }
.icon-shangyiye:before { content: "\e609"; }
.icon-back:before { content: "\e608"; }
.icon-shangyiye-copy:before { content: "\e60a"; }


body, h1, h2, h3, h4, h5, h6, li, ul {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100%;
    word-wrap: break-word;
    word-break: break-all;
}

.iconfont {
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
}

header{
    position: fixed;
    z-index: 10;
    top:-51px;
    padding:0 5px;
    background:rgba(255,255,255,.9);
    text-align: center;
    width:100%;
    height:50px;
    line-height: 50px;
    border-bottom:1px solid #bfbebb;
}
header.active{
    top:0;
}
header .retreat{
    float:left;
    text-decoration: none;
    color:#444;
}
header .bookmark{
    float:right;
}
header .bookmark i.iconfont{
    font-size:1.5em;
}
header .retreat i.iconfont{
    font-size:1.3em;
}
header h1{
    color:#81511c;
    font-weight:500;
    font-size:1.2em;
    margin-left:40px;
    margin-right:40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

nav {
    bottom:-61px;
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 60px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
nav.active{
    bottom:0;
}

nav .footer-nav {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: rgb(78,78,78);
}

nav .footer-nav a {
    width: 25%;
    height: 100%;
    cursor: pointer;
    padding: 5px 0;
    float: left;
    text-align: center;
    color: #c5c5c5;
    text-decoration: none;
}

nav .footer-nav a:hover {
    background: #666;
}

nav .footer-nav a:active {
    background: #333;
}

nav .footer-nav a > i {
    font-size: 1.5em;
    color: #fe9b00;
    text-shadow: none;
    display: block;
}

.skip-page {
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
}
.skip-page.active{
    opacity: 1;
}

.transition,.transition *{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


.skip-page > li {
    height: 100%;
    float: left;

}

.skip-page > li > div {
    text-align: center;
    position: relative;
    color:#fe9901;
    top:40%;
}

.skip-page > li > div>i.iconfont{
    font-size: 1.5em;
}
.skip-page > li:first-child {
    width: 35%;
}

.skip-page > li:nth-child(2) {
    width: 30%;
    border: 1px dashed #a2a2a2;
}

.skip-page > li:nth-child(3) {
    width: 35%;
}


.start-reading{
    position: absolute;
    cursor: pointer;
    top:60%;
    left:50%;
    margin-left:-25%;
    background: #797874;
    width:50%;
    height: 50px !important;

    line-height: 50px;
    text-align: center;

    color:#fe9901;
    font-weight:600;

    border:2px solid #fe9901 !important;
    border-radius: 10px;
    opacity: 0;

}

.active.skip-page .start-reading{
    opacity: 1;
}

/*正文*/
article{
    position: fixed;
    background:#f3f1e9;
    width:100%;
    height:100%;
    z-index: 3;
    text-align: justify;
}

article.tonight{
    background:#15171d !important;
}
article.tonight *,article.tonight{
    color:#475465 !important;
}

#book-pageinfo{
    padding:2px 10px 5px;
    position: fixed;
    width:100%;
    z-index: 4;
    color:#666;
}

#book-pageinfo h3{
    font-size:0.9em;
    float:left;
    font-weight:500;
    width:60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#book-pageinfo span{
    font-size:0.9em;
    text-align: right;
    display: inline-block;
    float:right;
    width:40%;
}
#book-pageinfo span b{
    font-weight:400;
}

/*目录*/
#book-catalogue{
    position: fixed;
    width:100%;
    height:100%;
    z-index: 11;
    background: #dfdfdf;
    top:0;
    left:-100%;
}
#book-catalogue.active{
    left:0;
}
.close-catalogue{
    position:absolute;
    right:10px;
    top:50%;
    border-radius: 50%;
    margin-top:-45px;
    background:#aaa;
    line-height: 1.2em;
    cursor: pointer;
    width:50px;
    height:100px;
    padding:5px;
    text-align: center;
    color:#fff;
}
.close-catalogue>span{
    display: inline-block;
    height:94px;
    width:20px;
}
.book-listname{
    height:10%;
    padding:5%;
    background:#dfdfdf;
    font-size:1.5em;
    color:#444;
}
#book-catalogue>ul{
    position: absolute;
    width:100%;
    height:90%;
    overflow: scroll;
    padding:0 20px;
}
#book-catalogue>ul>li{
    padding:20px 0;
    border-bottom: dotted 1px #999;
}

#book-catalogue>ul>li>a{
    display: inline-block;
    text-decoration: none;
    color:#666;
    font-size:0.95em;
}
#book-catalogue>ul>li.active>a{
    font-weight:900;
    color: #fe9b00;
}

#select-size{
    position: absolute;
    width:100%;
    height:50px;
    top:0;
    border-bottom:1px solid #444;
    background:rgba(78,78,78,.85);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
#select-size.active{
    top:-50px;
}
#select-size li{
    float:left;
    color:#c5c5c5;
    width:25%;
    height:50px;
    line-height: 50px;
    text-align:center;
}

#select-size li.active{
    color:#fe9b00;
    background:rgba(78,78,78,.7);;
}